import React, { useState } from "react";
import styles from "./Index.module.css";
import Mynao from "../../components/Mynao/Index";
import { Button, Form, Input } from "antd-mobile";
import { Dropdown } from "antd-mobile";
function Index() {
  const [form] = Form.useForm();
  //选择就诊人的关系
  const [selectlatio, setSelectlatio] = useState("");
  //存储证件类型
  const [selectType, setSelectType] = useState("");
  //存储现地址
  const [selectAddress, setSelectAddress] = useState("");

  //控制下拉框
  const [visible, setVisible] = useState(false);

  const Onfinsh = (values) => {};

  return (
    <div className={styles.addjiaz}>
      <div>
        <Mynao title="添加就诊人" />
      </div>

      <div className={styles.name}>请完善一下基本信息</div>

      <div className={styles.biao}>
        <Form
          footer={
            <Button block type="submit" color="primary" size="large">
              绑定
            </Button>
          }
          onFinish={Onfinsh}
          form={form}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              padding: "12px 16px",
              borderBottom: "1px solid #f0f0f0",
            }}
          >
            <span style={{ fontSize: "15px", color: "#333", minWidth: "80px" }}>
              就诊人关系
            </span>
            <div
              style={{
                flex: 1,
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                padding: "8px 12px",
                marginLeft: "16px",
              }}
            >
              {/* 根据是否选中动态显示文本和颜色 
              如果已选中显示选中值，否则显示占位符 
              选中后文字颜色从灰色变为深色 */}
              <span style={{ color: selectlatio ? "#333" : "#999" }}>
                {selectlatio || "请选择就诊人关系"}
              </span>
              <Dropdown>
                <Dropdown.Item key="relation" title="">
                  <div style={{ padding: 12 }}>
                    <div
                      style={{
                        padding: "8px 0",
                        borderBottom: "1px solid #f0f0f0",
                      }}
                      //点击选项，更新状态（后面以此类推）
                      onClick={() => {
                        setSelectlatio("本人");
                        setVisible(false);
                      }}
                    >
                      本人
                    </div>

                    <div
                      style={{
                        padding: "8px 0",
                        borderBottom: "1px solid #f0f0f0",
                      }}
                      onClick={() => setSelectlatio("亲属")}
                    >
                      亲属
                    </div>

                    <div
                      style={{
                        padding: "8px 0",
                        borderBottom: "1px solid #f0f0f0",
                      }}
                      onClick={() => setSelectlatio("朋友")}
                    >
                      朋友
                    </div>
                  </div>
                </Dropdown.Item>
              </Dropdown>
            </div>
          </div>

          <div>
            <Form.Item
              label="患者姓名"
              name="name"
              rules={[{ required: true, message: "姓名不能为空!" }]}
            >
              <Input placeholder="请输入姓名" />
            </Form.Item>
          </div>

          <div
            style={{
              display: "flex",
              alignItems: "center",
              padding: "12px 16px",
              borderBottom: "1px solid #f0f0f0",
            }}
          >
            <span style={{ fontSize: "15px", color: "#333", minWidth: "80px" }}>
              证件人类型
            </span>
            <div
              style={{
                flex: 1,
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                padding: "8px 12px",
                marginLeft: "16px",
              }}
            >
              <span style={{ color: selectType ? "#333" : "#999" }}>
                {selectType || "居民身份证"}
              </span>
              <Dropdown>
                <Dropdown.Item key="relation" title="">
                  <div style={{ padding: 12 }}>
                    <div
                      style={{
                        padding: "8px 0",
                        borderBottom: "1px solid #f0f0f0",
                      }}
                      onClick={() => setSelectType("居民身份证")}
                    >
                      居民身份证
                    </div>
                    <div
                      style={{
                        padding: "8px 0",
                        borderBottom: "1px solid #f0f0f0",
                      }}
                      onClick={() => setSelectType("港澳台通行证")}
                    >
                      港澳台通行证
                    </div>
                    <div
                      style={{
                        padding: "8px 0",
                        borderBottom: "1px solid #f0f0f0",
                      }}
                      onClick={() => setSelectType("外国护照")}
                    >
                      外国护照
                    </div>

                    <div
                      style={{
                        padding: "8px 0",
                        borderBottom: "1px solid #f0f0f0",
                      }}
                      onClick={() => setSelectType("军官证")}
                    >
                      军官证
                    </div>
                  </div>
                </Dropdown.Item>
              </Dropdown>
            </div>
          </div>

          <div>
            <Form.Item
              label="证件号"
              name="zheng"
              rules={[{ required: true, message: "证件号不能为空!" }]}
            >
              <Input placeholder="请输入姓名" />
            </Form.Item>
          </div>

          <div>
            <Form.Item
              label="联系电话"
              name="phone"
              rules={[{ required: true, message: "电话号不能为空!" }]}
            >
              <Input placeholder="请输入姓名" />
            </Form.Item>
          </div>

          <div>
            <Form.Item
              label="短信验证码"
              name="email"
              extra={<a>发送验证码</a>}
              rules={[{ required: true, message: "验证码不能为空!" }]}
            >
              <Input placeholder="请输入手机验证码" />
            </Form.Item>
          </div>

          <div
            style={{
              display: "flex",
              alignItems: "center",
              padding: "12px 16px",
              borderBottom: "1px solid #f0f0f0",
            }}
          >
            <Form.Item
              label="现住址"
              name="address"
              rules={[{ required: true, message: "现住址不能为空!" }]}
              style={{ marginLeft: "-14px" }}
            >
              <div
                style={{
                  flex: 1,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  padding: "8px 12px",
                  marginLeft: "46px",
                  marginTop: "-40px",
                }}
              >
                <span style={{ color: selectAddress ? "#333" : "#999" }}>
                  {selectAddress || "请选择现居住地"}
                </span>
                <Dropdown>
                  <Dropdown.Item key="relation" title="">
                    <div style={{ padding: 12 }}>
                      <div
                        style={{
                          padding: "8px 0",
                          borderBottom: "1px solid #f0f0f0",
                        }}
                        onClick={() => setSelectAddress("四川省-成都市-锦江区")}
                      >
                        四川省-成都市-锦江区
                      </div>
                    </div>
                  </Dropdown.Item>
                </Dropdown>
              </div>
            </Form.Item>
          </div>

          <div>
            <Form.Item
              label="现住址详情"
              name="xiang"
              rules={[{ required: true, message: "现住址详情不能为空!" }]}
            >
              <Input placeholder="请输入现地址详情，精确到门牌号" />
            </Form.Item>
          </div>
        </Form>
      </div>
    </div>
  );
}

export default Index;
